<template>
  <div class="quality-info-record">
    <base-modal :show="dialogVisible" title="质保变更动态" width="600px" @cancel="close">
      <base-timeline 
        :data="recordPage.list" 
        :record-render="renderRecord" 
        :loading="recordLoading"
        :loadmore="recordPage.hasNextPage"
        @load="loadmore"
      />
    </base-modal>
  </div>
</template>

<script>
/* api */
import { getProductQualityInfoRecordList } from '@src/api/ProductV2Api'
/* model */
import Page from '@model/Page'

import { jumpContractDetail } from '@src/modules/contract/util/JumpContractUtil.js';

export default {
  name: 'quality-info-record',
  props: {
    shareData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogVisible: false,
      params: {
        primaryId: this.shareData?.product?.id,
        pageNum: 1,
        pageSize: 15,
        module: 'quality'
      },
      recordPage: new Page(),
      recordLoading: false,
      commentPending: false,
      inputState:false
    }
  },
  computed: {
    product(){
      return this.shareData.product || {};
    },
    productId() {
      return this.product.id;
    }
  },
  methods: {
    /** 根据记录的action渲染对应的内容，支持jsx和render函数 */
    renderRecord(h, item){
      let {action, userName, content = {} } = item;
      
      // TODO：action需要注意
      if(action === '编辑产品类型'){
        return [
          <h5 class="main-info">
            <strong>{userName}</strong> {this.$t('product.detail.qualityInfoRecord.text.text1')}
          </h5>,
          <p class="principal-info">
            {this.$t('product.type.qualityStartTime')}：{ content?.qualityStartTime };
            {this.$t('product.type.qualityEndTime')}：{ content?.qualityEndTime };
          </p>
        ]
      }
      
      if(action === '修改质保信息'){
        return [
          <h5 class="main-info">
            <strong>{userName}</strong> {this.$t('product.detail.qualityInfoRecord.text.text2')}
          </h5>,
          <p class="principal-info">
            {this.$t('product.type.qualityStartTime')}：{ content?.qualityStartTime };
            {this.$t('product.type.qualityEndTime')}：{ content?.qualityEndTime }
          </p>
        ]
      }

      if (action === '更新质保服务') {
        return [
          <h5>
            <strong>{userName}</strong>
            { content?.contractNo ?  <span>使用合同<span class="contractNo" onClick={e => this.toContractDetail(content)}>[{ content.contractNo }]</span>{action}</span> : <span>{action}</span>}
          </h5>
        ];
      }
      
      if (action === '更新质保信息') {
        return [
          <h5 class="main-info">
            <strong>{userName}</strong>
            <span>使用合同<span class="contractNo" onClick={e => this.toContractDetail(content)}>[{ content.contractNo }]</span>{action}</span>
          </h5>,
          <p class="principal-info">
            {this.$t('product.type.qualityStartTime')}：{ content?.qualityStartTime };
            {this.$t('product.type.qualityEndTime')}：{ content?.qualityEndTime }
          </p>
        ]
      }
      return [
        <h5 class="main-info">
          <strong>{userName}</strong> {this.$t('product.detail.qualityInfoRecord.text.text3')}
        </h5>,
        <p class="principal-info">
          {this.$t('product.type.qualityStartTime')}：{ content?.qualityStartTime };
          {this.$t('product.type.qualityEndTime')}：{ content?.qualityEndTime }
        </p>
      ]
    },
    // 跳转合同详情
    toContractDetail(item) {
      const { contractId, contractTemplateId } = item;

      if (!contractId) return;
     
      jumpContractDetail({ id: contractId, templateId: contractTemplateId })
    },
    /** 初始化信息动态 */
    async initializeRecord() {
      this.params.pageNum = 1;
      this.searchRecord();
    },
    /** 加载下一页 */
    async loadmore() {
      try {
        this.params.pageNum++
        this.recordLoading = true
        let result = await this.fetchRecord(this.params)
        this.recordLoading = false
        this.recordPage.merge(result)
      } catch (error) {
        console.warn(error)
      }
    },
    /** 抓取信息动态 */
    fetchRecord(params){
      return getProductQualityInfoRecordList(params)
    },
    async searchRecord() {
      try {
        this.recordLoading = true;
        let result = await this.fetchRecord(this.params);
        this.recordLoading = false;
        this.recordPage.list = [];
        this.recordPage.merge(result)
      } catch (error) {
        console.error(error)
      }
    },
    close() {
      this.dialogVisible = false;
    }
  },
  mounted() {
    this.initializeRecord();
    this.$eventBus.$on('quality_info_record.update_record_list', this.searchRecord)
  },
  beforeDestroy() {
    this.$eventBus.$off('quality_info_record.update_record_list', this.searchRecord)
  }
}
</script>

<style lang="scss">
.quality-info-record {
  .principal-info {
    margin-left: 0;
  }
}

.contractNo {
  color: $color-primary-light-6;
  cursor: pointer;
}
</style>
